<template>
	<div id="login">
		<div class="box">
			<p class="img">
				<span v-if="!showOrHide" class="tips">大自然图片</span>
				<!-- <img v-if="!showOrHide" ref="preview" src="../../public/images/agent.png" height="84" width="84" @click.stop="setImg"> -->
				<img v-if="!showOrHide" ref="preview" :src="src" height="84" width="84" >
				<img v-if="showOrHide" ref="preview" :src="src" height="84" width="84">
				<!-- 加上showOrHide是因为如果注册完成之后就会头像了 -->
				<!-- <input v-if="!showOrHide" type="file" name="file" ref="file" @change="readURL"> -->
			</p>
			<p class="text">
				欢迎来到记账空间
			</p>
			<div class="login_box">
				<p class="account">
					昵称&nbsp;&nbsp;
					<i class="iconfont icon-icon"></i>
					<input v-model="username" ref="username" class="username" type="text" name="username" placeholder="请输入非中文用户名">
				</p>
				<p class="pswd">
					密码&nbsp;&nbsp;
					<i class="iconfont icon-mima"></i>
					<input v-model="password" ref="password" class="password" type="password" name="password" placeholder="请输入密码">
				</p>
				<p class="btnGroup">
					<input v-if="showOrHide" @click.stop="submit" class="submit" ref="submit" type="submit" 
					value="登录">&nbsp;&nbsp;
					<!-- showOrhide表示是登录页面还是注册页面 -->
					<input v-if="showOrHide"  @click.stop="toRigster" class="button" ref="button" type="button" value="去注册">
					<!-- 表示注册页面 -->
					<input v-if="!showOrHide" type="submit" @click.enter.stop="rigster" class="rigster" value="注册">
				</p>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
// eslint-disable-next-line
/* eslint-disable */
export default {
	name: 'common',
	props:{
		showOrHide:{
			// 表示一开始就是登陆页面 true
			type: Boolean,
			default: true
		},
		src: {
			type: String,
			default: 'http://lorempixel.com/84/84/nature/'
		}
	},
	data() {
		return {
			username: '',
			password: ''
		}
	},
	methods: {
		setImg() {
			this.$emit("setImg")
		},
		readURL() {
			this.$emit("readURL",this.$refs.file)
		},
		submit() {
			this.$emit('submit',this.username,this.password)
		},
		toRigster() {
			this.$emit("toRigster")
		},
		rigster() {
			this.$emit("rigster",this.username,this.password)
		}

	}
}
</script>
<style lang="scss">
@import "../../public/sass/var.scss";
.box{
	padding: 10px;
	background-color: #666;
	.text{
		text-align: center;
		color: $familycolor;
		padding-top: 10%;
	}
	.login_box{
		margin: 0 0 50% 0;
		.pswd{
			
		}
		.btnGroup{
			padding-top: 10%;
		}
	}
	.img{
		position: relative;
		text-align: center;
		margin-top: 20%;
		margin-bottom: 20%;
		img{
			background-size: contain;
			border-radius: 50%;
		}
		input{
			position: absolute;
    		top: 50%;
    		left: 50%;
    		transform: translate(-50%,-50%);
    		opacity: 0;
		}
		.tips{
			display: block;
			padding-bottom: 5px;
			color: #fff;
			font-size:$fontsize;
		}
	}
	.account{
		position: relative;
		padding: 10px;
		text-align: center;
		color: $familycolor;
		.icon-icon{
			position: absolute;
			top: 20%;
			color: $accountcolor;
			font-size:$account;
		}
		.username{
			width:70%; 
			height: 30px;
			text-indent: 25px;
			outline: none;
			border: none;
		}
	}
	.pswd{
		position: relative;
		padding: 10px;
		text-align: center;
		color: $familycolor;
		.icon-mima{
			position: absolute;
			top: 20%;
			z-index: 1000;
			color: $accountcolor;
			font-size:$account;
		}
		.password{
			width:70%; 
			height: 30px;
			text-indent: 25px;
			outline: none;
			border: none;
		}
	}
	.btnGroup{
		text-align: center;
		input{
			// outline: none;
			border: none;
			color: $familycolor;
			background-color:$btnbackgroundcolor;
			cursor: pointer;
			padding: 5px;
		}
		.submit{
			width: 20%;	
		}
		.button{
			width: 30%;
		}
		.rigster{
			width: 20%;	
			margin-left: 10px;
		}
	}
}
</style>